<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录</title>
	<link rel="Shortcut Icon" href="../images/favicon.ico" />
	<link href="css/bootstrap.min.css?v=3.3.7" rel="stylesheet">
    <link href="../css/font-awesome.css?v=4.4.0" rel="stylesheet">
	<link href="../iconfont/iconfont.css" rel="stylesheet" />
    <link href="../css/style.css?v=4.1.0" rel="stylesheet">
    <link href="../css/cross.css" rel="stylesheet">
    <link href="../css/change.css" rel="stylesheet">
    <!-- <script>if(window.top !== window.self){ window.top.location = window.location;}</script> -->
</head>

<body class="gray-bg">
	<div class="login-index">
		<div class="login-left">
			<img src="../images/logo2.png" class="login-logo">
			<img src="../images/login-con.png" class="login-con-l">
			<h1 class="login-tit-l">欢迎登录</h1>
			<p class="welcome-p">WELOCOME TO LOGIN</p>
		</div>
		<div class="login-right login-con" id="login">
			<div class="login-input mt-160">
				<h1 class="reg-tit">账号密码登录</h1>
				<!-- 账号 -->
				<div>
					<div class="login-tel mt-60">
						<i class="iconfont icon-shoujihao"></i>
						<input type="number" placeholder="请输入手机号"/>
					</div>
					<p class="c-hide">账号错误！</p>
				</div>
				<!-- 验证码 -->
				<!-- <div id="code">
					<div class="login-tel m-t-lg">
						<i class="iconfont icon-yanzhengma"></i>
						<input type="text" placeholder="请输入验证码"/>
						<span class="get-code">获取验证码</span>
					</div>
					<p class="c-hide">验证码错误！</p>
				</div> -->
				<!-- 密码登录 -->
				<div id="pwd">
					<div class="login-tel m-t-lg">
						<i class="iconfont icon-mima"></i>
						<input type="text" placeholder="请输入密码"/>
						<i id="eyes" class="iconfont icon-zhanshimima mima-show"></i>
					</div>
					<p class="c-hide">密码错误！</p>
				</div>
				<div class="login-agreement mt-100"><span><i class="check"></i>阅读并接受<a href="高血压质控平台用户协议.html" target="_blank">高血压质控平台用户协议</a></span><span class="forget-pwd">忘记密码</span></div>
				<a href="javascript:;" class="login-btn m-t-lg" id="login_btn">登录</a>
				<p class="registere m-t-lg" id="open_registere">还没有账户？<i>立即注册</i></p>
			</div>
		</div>
		<div class="login-right reg-con" id="registere">
			<div class="login-input">
				<h1 class="reg-tit">注册申请</h1>
				<div class="login-tel mt-20" id="org_open">
					<input type="text" placeholder="请选择医疗机构" id="org" disabled=""/>
					<i class="iconfont icon-xiangxia"></i>
					<ul class="select-ul c-hide" id="select">
						<li class="curr">医疗机构1</li>
						<li>医疗机构2</li>
						<li>医疗机构3</li>
						<li>医疗机构4</li>
					</ul>
				</div>
				<div class="login-tel mt-20">
					<input type="number" placeholder="请填写您的姓名或昵称（选填）"/>
				</div>
				<div class="login-tel mt-20">
					<input type="number" placeholder="请输入手机号"/>
				</div>
				<div class="login-tel mt-20">
					<input type="number" placeholder="请输入密码"/>
					<i id="eye" class="iconfont icon-zhanshimima mima-show"></i>
				</div>
				<div class="login-tel mt-20">
					<input type="number" placeholder="请输入验证码"/>
					<span class="get-code">获取验证码</span>
				</div>
				<p class="login-agreement mt-70"><i class="check"></i>阅读并接受<a href="高血压质控平台用户协议.html" target="_blank">高血压质控平台用户协议</a></p>
				<a href="javascript:;" class="login-btn m-t-lg" id="registere_btn">提交注册</a>
				<p class="registere m-t-lg" id="open_login">已有账号？<i>去登录</i></p>
			</div>
		</div>
	</div>
		
	<div class="mask c-hide">
		<div class="mask-con">
			<img src="../images/success.png" >
			<h5>提交申请成功</h5>
			<p>管理员将在 1-5 个工作日完成审核后即可登录使用</p>
		</div>
	</div>
	<div class="mask c-hide" id="forget">
		<div class="msg-mask w-400">
			<h5>联系管理<i class="iconfont icon-guanbi close-for" id=""></i></h5>
			<p class="tip-reset">若您忘记当前登录密码请联系管理人员重置密码</p>
			<h3 class="name-tel">郑**  159 5911 0497</h3>
			<h3 class="name-tel">蔡**  159 8023 5835</h3>
			<div class="mask-btn mt-10">
				<a class="c-btn btn-bg-blue close-for" href="javascript:;">确定</a>
			</div>
		</div>
	</div>
</body>

<!-- 全局js -->
<script src="../js/jquery.min.js?v=2.1.4"></script>
<script src="../js/bootstrap.min.js?v=3.3.7"></script>
<script type="text/javascript">
	$(function(){
		// 忘记密码
		$('.forget-pwd').on('click', function() {
			$('#forget').removeClass('c-hide')
		})
		$('.close-for').on('click', function() {
			$('#forget').addClass('c-hide')
		})
		
		// 是否统一协议
		$('.check').on('click', function() {
			$(this).toggleClass('checked')
		})
		// 选择机构
		$('#org_open').on('click', function() {
			$('.select-ul').removeClass('c-hide')
		})
		$('.select-ul li').on('click', function(e) {
			e.stopPropagation()
			$(this).addClass('curr').siblings().removeClass('curr')
			$('#org').val($(this).text())
			$('.select-ul').addClass('c-hide')
		})
		$('.mima-show').on('click', function() {
			if ($(this).hasClass('icon-zhanshimima')){
				$(this).removeClass('icon-zhanshimima')
				$(this).addClass('icon-yincangmima')
				$(this).prev().prop('type','password')
			} else {
				$(this).addClass('icon-zhanshimima')
				$(this).removeClass('icon-yincangmima')
				$(this).prev().prop('type','text')
			}
		})
		// 提交注册
		$('#registere_btn').on('click',function() {
			$('.mask').removeClass('c-hide')
			var timer = setInterval (function () {
				$('.mask').addClass('c-hide')
				$('#login').removeClass('c-hide')
				$('#registere').addClass('c-hide')
				window.clearTimeout(timer)
			}, 5000);
		})
		// 去注册
		$('#open_registere').on('click',function(){
			$('.login-tel').parent().removeClass('error')
			$('.login-tel').next().addClass('c-hide')
			$('.login-tel').addClass('m-t-lg')
			$('#registere').removeClass('c-hide')
			$('#login').addClass('c-hide')
		})
		// 去登录
		$('#open_login').on('click',function(){
			$('#login').removeClass('c-hide')
			$('#registere').addClass('c-hide')
		})
		// 验证码登录密码登录切换
		$('.login-tit').on('click','span',function(){
			console.log($(this).index())
			$(this).addClass('curr').siblings().removeClass('curr')
			if ($(this).index() == 0) {
				$('#code input').val('')
				$('#code').removeClass('c-hide')
				$('#pwd').addClass('c-hide')
			} else if($(this).index() == 1) {
				$('#pwd input').val('')
				$('#code').addClass('c-hide')
				$('#pwd').removeClass('c-hide')
			}
		})
		// 登录
		$('#login_btn').on('click',function(){
			$('.login-tel').parent().addClass('error')
			$('.login-tel').next().removeClass('c-hide')
			$('.login-tel').removeClass('m-t-lg')
		})
		$('.login-tel').on('click', function(){
			$(this).children('input').focus()
		})
	})
</script>
</html>
